###out:src/main/views/${root.beanName ?lower_case}/list.vue
/********
${root.tableComment}  管理页面
**********/
<template>
	<div>
    <div class="fkzdqb">
    
         <p class="new" align="right">
        <el-button type="primary"  @click="add()">新增</el-button>
      </p> 
    </div>
    <div class="kjjjr_form">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection"width="55">
        </el-table-column>   
           <el-table-column prop="id"  v-if="show" label="" align="center">
        </el-table-column>
     
            <#list root.tableColumns as column>
            <#if column.propertyName != 'id' && column.propertyName != 'delflag'    && column.propertyName != 'createdate'  
                && column.propertyName != 'createdate'     && column.propertyName != 'createby'  
               && column.propertyName != 'updateby'  
            && column.propertyName != 'updatedate' && column.propertyName != 'extid'   && column.propertyName != 'create_by' && column.propertyName != 'create_date'  && column.propertyName != 'update_by'  && column.propertyName != 'update_date'  && column.propertyName != 'remarks' >
   					<el-table-column prop="${column.propertyName}" label="${column.columnComment}" align="center">   </el-table-column>
    </#if></#list>
        <el-table-column  prop=""  label="操作" align="center">
          <template scope="scope">
             <el-button @click="info(scope.$index, tableData)" type="text" size="small">详情</el-button>
             <el-button @click="makeSureDelete(scope.row.id)" type="text" size="small">删除</el-button>
           </template>
        </el-table-column>
      </el-table>
    </div>
      <!-- 详情弹窗 -->
      <el-dialog id="el-dialog" :title="headMsg" v-model="dialogTableVisible" ref="dialog" >
          <el-form :model="form" :rules="rules">
           <el-input type="hidden"  v-model="form.id"  size="small" ></el-input>
        
         <#list root.tableColumns as column>
            <#if column.propertyName != 'id' && column.propertyName != 'delflag'    && column.propertyName != 'createdate'  
                && column.propertyName != 'createdate'     && column.propertyName != 'createby'  
               && column.propertyName != 'updateby'  
            && column.propertyName != 'updatedate' && column.propertyName != 'extid'   && column.propertyName != 'create_by' && column.propertyName != 'create_date'  && column.propertyName != 'update_by'  && column.propertyName != 'update_date'  && column.propertyName != 'remarks' >
   				 <el-form-item label="${column.columnComment}" prop="${column.propertyName}" >
              <el-input  type="text" v-model="form.${column.propertyName}" ></el-input>
            </el-form-item>
   				 </#if></#list>
         </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitLb()">确 定</el-button>
        </div>
                   
           
      </el-dialog>
        <el-dialog title="确认删除" v-model="dialogVisible" size="tiny" ref="makeSureDelete">
        <el-input type="hidden" v-model="comm"  size="small" ></el-input>
       <span>
        确定删除该条记录？</span>
        <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="deleteCmsLb()">确 定</el-button>
    </span>
  </el-dialog>
      <div class="jjrglfy">
        <el-pagination
          @size-change="handleQBSizeChange" 
          @current-change="handleQBCurrentChange" 
          :current-page="pageNoQb" 
          :page-sizes="[5, 10, 15, 20]" 
          :page-size="pageSizeQb" 
          layout="total, sizes, prev, pager, next, jumper" 
          :total="totalQb">
        </el-pagination>        
      </div>
    </div>    
  </div>
</template>

  
<script>
  import {mapActions,mapState,mapGetters} from 'vuex';
  import API from '../../api/API'
  const api = new API();
  export default {
    mounted: function(){
      this.platelListQb({pageNo:1, pageSize:10,json:'{createby:""}'});
    },
    data() {
     
      return {
        comm:"",
        show:'',
        headMsg:'',
        searchinput:'',
        dialogVisible:false,
        tableData:[],
        totalQb:0,
        pageCount : 0,
        pageSizeQb :10,
        pageNoQb :1   ,  
        dialogTableVisible:false,    
        form:{
               id:'',
        <#list root.tableColumns as column>
            <#if column.propertyName != 'id' && column.propertyName != 'delflag'    && column.propertyName != 'createdate'  
                && column.propertyName != 'createdate'     && column.propertyName != 'createby'  
               && column.propertyName != 'updateby'  
            && column.propertyName != 'updatedate' && column.propertyName != 'extid'   && column.propertyName != 'create_by' && column.propertyName != 'create_date'  && column.propertyName != 'update_by'  && column.propertyName != 'update_date'  && column.propertyName != 'remarks' >
					${column.propertyName},        		
   				 </#if></#list>
        }, 
        rules: {
        },    
        value1:'',
  
      }
    },
   methods: {
    searchChange:function(){
      this.searchinput="";
    },
    seachInfoLb:function(){
     let that = this;
       if(that.value1==null || that.value1==''){
              that.platelListQb({pageNo:1, pageSize:10,json:'{createby:""}'});
        }else{
            that.platelListQb({pageNo:1, pageSize:10,json:'{createby:"",'+that.value1+':"'+that.searchinput+'"}'});
        }
      },
    platelListQb:function(param){
       let that = this;
       let params ={
       api:"${config.projectName}/${root.beanName ?lower_case}/findPage",
       param : param
        };
        api.get(params)
         .then(function(res){
           var data = (res.data.data);
         if(res.data.success){
              that.tableData = data.list;          
              that.totalQb = data.count;
              that.pageSizeQb = data.pageSize;
              that.pageCount = data.totalPage;
              that.pageNoQb =  data.pageNo; 
          }else{
          } 
        })
         .catch(function(err){
          api.reqFail(that,"获取列表失败请刷新页面");
          });
      },    
    handleQBSizeChange(val) {
       let that = this;
         if(that.value1==null || that.value1==''){
        that.platelListQb({pageNo:that.pageNoQb, pageSize:val,json:'{createby:""}'});
      }else{
          that.platelListQb({pageNo:that.pageNoQb, pageSize:val,json:'{createby:"",'+that.value1+':"'+that.searchinput+'"}'});
      }
        },
    handleQBCurrentChange(val) {
             let that = this;
         if(that.value1==null || that.value1==''){
        that.platelListQb({pageNo:val, pageSize:that.pageSizeQb,json:'{createby:""}'});
      }else{
          that.platelListQb({pageNo:val, pageSize:that.pageSizeQb,json:'{createby:"",'+that.value1+':"'+that.searchinput+'"}'});
      }
    },      
         //显示详情界面
      info:function(index, rows){  
        let that = this;  
        that.headMsg="${root.tableComment} 详情" ;    
        setTimeout(function(){
         that.$refs.dialog.open();
         that.form = rows[index];
             },100);

      },     

    //新增页面   
    add:function(){
        let that = this;
        that.headMsg="新增${root.tableComment} "
        that.form=[];
        that.$refs.dialog.open();
    }, 
     submitLb:function(){
        let that = this;
        let params ={
        api:"${config.projectName}/${root.beanName ?lower_case}/save",
       param : {
              id: that.form.id,
                      <#list root.tableColumns as column>
            <#if column.propertyName != 'id' && column.propertyName != 'delflag'    && column.propertyName != 'createdate'  
                && column.propertyName != 'createdate'     && column.propertyName != 'createby'  
               && column.propertyName != 'updateby'  
            && column.propertyName != 'updatedate' && column.propertyName != 'extid'   && column.propertyName != 'create_by' && column.propertyName != 'create_date'  && column.propertyName != 'update_by'  && column.propertyName != 'update_date'  && column.propertyName != 'remarks' >
					    ${column.propertyName}: that.form.${column.propertyName},           		
   				 </#if></#list>
            }
        };
        api.get(params)
         .then(function(res){
         if(res.data.success){
             that.$refs.dialog.close(); 
             that.platelListQb({pageNo:1, pageSize:10,json:'{createby:""}'});  
          }else{
          } 
        })
         .catch(function(err){
          api.reqFail(that,"获取列表失败请刷新页面");
          });

      }, 
     makeSureDelete:function(param){
        let that = this;
        that.comm = param;
        that.$refs.makeSureDelete.open();
    
     },
    deleteCmsLb:function(index, rows){
     let that= this;
        let params ={
        api:"${config.projectName}/${root.beanName ?lower_case}/delete",
         param : {
          id:that.comm
          }
        };
        api.get(params)
         .then(function(res){
         if(res.data.success){
         that.dialogVisible = false;
         that.platelListQb({pageNo:1, pageSize:10,json:'{createby:""}'});  
          }else{
          } 
        })
         .catch(function(err){
          api.reqFail(that,"获取列表失败请刷新页面");
          });

   
  },
    }
  }
   
</script>

<style scoped>
@import '../../assets/css/cfgl.css'
</style>